<template>
	<view class="container" v-if="loaded">
		<view class="banner">
			<swiper class="swiper" :indicator-dots="true" :autoplay="false" :interval="3000" indicator-active-color="#FF2D5E">
				<swiper-item v-for="(item, index) in gallaty" :key="index">
					<view class="swiper-item"><image class="img" :src="item" mode=""></image></view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="h1">
			<view class="icon">
				京东
			</view>
			
			<text>{{title}}</text>
		</view>
		
		<!-- <view class="row pt20">
			<view class="sell">63万+条评论</view>
			<view class="sell">好评率96%</view>
			<view class="sell" @click="onBuyClick(true)">查看详情 ></view>
		</view> -->
		
		<view class="row pt20">
			<view class="price" v-if="itemfee_coupon">
				<text class="i">￥</text>
				<text>{{itemfee_final}}</text>
				<text class="u">￥{{itemfee}}</text>
			</view>
			
			<view class="price" v-if="!itemfee_coupon">
				<text class="i">￥</text>
				<text>{{itemfee_final}}</text>
			</view>
			
			<view class="sell">已售{{item.item_sell}}件</view>
		</view>
		
		<view class="row pt20 quan" v-if="itemfee_coupon">
			<image src="../../../static/fanli/156.png" mode="" class="icon"></image>
			
			<view class="cite">
				<view class="num">
					<text class="i">￥</text>
					<text class="b">{{itemfee_coupon}}</text>
					<text class="i">优惠券</text>
				</view>
				
				<text class="time">{{item.coupon_start_time +"至"+ item.coupon_end_time}}</text>
			</view>
			
			<button class="btn" @click="onBuyClick"></button>
		</view>
		
		<view class="row bdt" style="padding: 0 0 15rpx 0;" >
			<view class="shop" style="margin: 0 auto; ">
				<!-- <view class="name">
					<image src="../../../static/fanli/157.png" mode="" class="icon"></image>
					<text>{{shop_name}}</text>
				</view> -->
				
				<view class="point">
					<view class="li">
						<image  src="../../../static/fanli/icon_selected.png" mode="" class="icon"></image>
						<text class="i">京东商品</text>
						
					</view>
					
					<view class="li">
						<image  src="../../../static/fanli/icon_selected.png" mode="" class="icon"></image>
						<text class="i">品质保证</text>
					</view>
					
					<view class="li">
						<image  src="../../../static/fanli/icon_selected.png" mode="" class="icon"></image>
						<text class="i">无忧售后</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="row bdt" style="padding: 15rpx 0 15rpx 30rpx">
			<view class="shop">
				<view class="point mt0">
					<view class="li">
						<text class="i">商品编号：{{id}}</text>
						<text class="b" @click="copyClick(id)">复制</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="hot-goods">
			<view class="title">
				猜你喜欢
			</view>
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="6000" indicator-active-color="#FF2D5E">
				<swiper-item v-for="(good, key) in hotGood" :key="key">
					<view class="swiper-item hot-good-list">
						<view class="item" v-for="(item, index) in good" :key="index" @click="onGoodClick(item, index)">
							<image :src="item.main_pic" mode="" class="pic"></image>
							
							<view class="cite">
								<text class="name">{{item.goods_name || item.title}}</text>
								<view class="row">
									<view class="quan" v-if="item.itemfee_coupon>0">
										<text>券{{item.itemfee_coupon}}</text>
									</view>
									
									<view class="fan">
										<text>返{{item.buy_commission}}</text>
									</view>
								</view>
								<view class="price">
									<text class="i">￥</text>
									<text class="b">{{item.shop_price || item.itemfee_final}}</text>
									<text class="u" v-if="item.itemfee_coupon>0">￥{{item.market_price || item.itemfee}}</text>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- <view class="detail" v-if="html">
			<view class="row dt">
				<text>商品详情</text>
			</view>
			<view class="con" v-html="html"></view>
		</view> -->
		
		<view class="footer">
			<button class="btn btn_home" @click="onBackHomeClick">
				<text>首页</text>
			</button>
			<button class="btn btn_home bdl" @click="onDataErrorClick">
				<text>纠错</text>
			</button>
			<button class="btn btn_share" @click="onShareClick">
				<text class="b">分享赚</text>
			</button>
			
			<button class="btn btn_buy" @click="onBuyClick">
				<text class="b">自购省</text>
			</button>
		</view>
		
		<good-share  ref="goodShare" />
	</view>
</template>

<script>
	import { JSMRequest } from '@/module/api'
    import WxNotificationCenter from '@/libs/WxNotificationCenter/wxnotificationcenter'
	import GoodShare from '@/components/good-share/good-share'
	import { encodeGoodId } from '@/common/util'

	const _ = require("@/libs/underscore/underscore-min.js")._
	
	export default {
		data() {
			return {
				scrollTop: 0,
				statusBarHeight: 0,
				loaded: false,
				id: null,
				key: null,
				type: null,
				gallaty: [],
				title: '',
				itemfee: 0,
				itemfee_final: 0,
				itemfee_coupon: 0,
				commission_gift_card: 0,
				commission_gift_card_share: 0,
				shop_name: '',
				html: '',
				item: {},
				hotGood: []
			};
		},
		
		components: {
			GoodShare
		},
		
		computed: {
			shareAppMessage () {
				let invite = this.userInfo.code || ""
				let id = this.id
				let scene = encodeURIComponent(`iv=${invite}&p=jgd&id=${id}`)
				return _.isEmpty(this.item) ? this.$store.state.shareAppMessage : {
					title: this.title,
					path: `/pages/index/index?scene=${scene}`,
					imageUrl: this.gallaty[0] || ""
				}
			},
			
			userInfo () {
				return this.$store.state.userInfo
			},
			
			headerStyle () {
				let opacity = 0
				if(this.scrollTop > 0){
					opacity = this.scrollTop / 184
					if(opacity > 1) opacity = 1
				}
				return "opacity: " + opacity + ";padding-top: " + this.statusBarHeight + "px;"
			},
			
			headerStyleDown () {
				let opacity = 0
				if(this.scrollTop > 0){
					opacity = this.scrollTop / 184
					if(opacity > 1) opacity = 1
				}
				opacity = 1 - opacity
				return "opacity: " + opacity + ";padding-top: " + this.statusBarHeight + "px;"
			}
		},
		
		onShareAppMessage () {
			return this.shareAppMessage
		},
		
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		
		onReady () {
			let _t = this
			uni.getSystemInfo({
				success: res => {
					// console.log(res)
					_t.statusBarHeight = res.statusBarHeight
				}
			})
		},
		
		onLoad (params) {
			this.id = params.id || null
			this.key = params.key || null
			this.onPageRefresh()
		},
		
		methods:{
			onBackHomeClick () {
				uni.reLaunch({
					url: "/pages/index/index"
				})
			},
			
			onDataErrorClick () {
				uni.navigateTo({
					url: "/pages/home/good-detail-error/good-detail-error?id=" + this.id
				})
			},
			
			onBackClick () {
				uni.navigateBack({
					
				})
			},

			onDetailClick () {
				if(this.userInfo == null){
					uni.navigateTo({
						url: "/pages/index/index"
					})
				}else{
					// 绑定邀请码
					if(!this.userInfo.parent){
						return uni.navigateTo({
							url: "/pageMe/me/bind-invite/bind-invite"
						})
					}

					wx.navigateToMiniProgram({
						appId: 'wx13e41a437b8a1d2e',
						path: '/pages/jingfen_twotoone/item?spreadUrl=' + encodeURIComponent(res.data) + '&customerinfo=20191209JSM',
						extraData: {
							foo: 'bar'
						},
						envVersion: 'release',
						success(res) {
							// 打开成功
							console.log(res);
							console.log("打开成功")
						}
					})
				}
			},
			
			onGoodClick (item, index){
				// console.log(item)
				if(item.item_id){
					uni.navigateTo({
						url: "/pages/home/good-detail/good-detail?id=" + item.item_id
					})
				}else{
					uni.navigateTo({
						url: "/pageSupplier/supplier/good-detail/good-detail?isSupplierGood=0&id=" + item.id
					})
				}
			},
			
			onBuyClick (isDetail = false) {
				let _t = this;
				
				if(this.userInfo == null){
					return uni.navigateTo({
						url: "/pages/index/index"
					})
				}

				// 绑定邀请码
				if(!this.userInfo.parent){
					return uni.navigateTo({
						url: "/pageMe/me/bind-invite/bind-invite"
					})
				}

				uni.showLoading({
					mask: true,
					title: '请求中...'
				})

				JSMRequest({
					tag: "jsm-good-link",
					params: {
						itemid: this.id
					}
				}).then(( { data } ) => {
					uni.hideLoading()
					let customerinfo = "20191209JSM"
					let spreadUrl = encodeURIComponent(data)
					let path = `/pages/proxy/union/union?spreadUrl=${spreadUrl}&customerinfo=${customerinfo}`
					// let path = `/pages/jingfen_twotoone/item?spreadUrl=${spreadUrl}&customerinfo=${customerinfo}`
					
					// if(isDetail) path = `/pages/product/product?wareId=skuId&spreadUrl=${spreadUrl}&customerinfo=${customerinfo}`
					console.log(path)
					wx.navigateToMiniProgram({
						appId: 'wx13e41a437b8a1d2e',
						path,
						extraData: {
							foo: 'bar'
						},
						envVersion: 'release',
						success(res) {
							// 打开成功
							console.log(res);
							console.log("打开成功")
						}
					})
				}).catch(e => {
					uni.hideLoading()
					uni.showToast({
						icon: "none",
						title: e.msg
					})
				})
			},
			
			onShareClick () {
				if(this.userInfo == null){
					return uni.navigateTo({
						url: "/pages/index/index"
					})
				}
				
				// 绑定邀请码
				if(!this.userInfo.parent){
					return uni.navigateTo({
						url: "/pageMe/me/bind-invite/bind-invite"
					})
				}
				
				let _t = this
				let codeStr = '- - -$￥' + encodeGoodId(_t.id.toString()) + '1￥$- - -';
				let copyText = ''
						
				if(this.item.itemfee_coupon.toString() == "0"){
					copyText = "[京东]"+this.item.title+'\n￥'+this.item.itemfee_final+'\n'+codeStr+'\n 领取下单 '+this.item.coupon_link+' \n 然后打开链接 即可领取优惠券'
				}else{
					copyText = "[京东]"+this.item.title+'\n【原价】￥'+this.item.itemfee+'\n【券后价】￥'+this.item.itemfee_final+'\n'+codeStr+'\n 领取下单 '+this.item.coupon_link+' \n 然后打开链接 即可领取优惠券'
				}
				
				this.$refs.goodShare.show({
					id: this.id,
					type: 1,
					text: copyText
				})
			},
			
			onPageRefresh () {
				let _t = this
				let data = {}
				// data.uid = this.userInfo.id
				// data.type = this.pageType
				if(this.id != null) data.itemid = this.id
				if(this.key != null) data.key = this.key

				JSMRequest({
					tag: "jsm-good-detail",
					params: data
				}).then(( { data } ) => {
					_t.id = data.item_id
					_t.gallaty = data.gallaty
					_t.title = data.title
					_t.type = data.item_type
					_t.itemfee = data.itemfee
					_t.itemfee_final = data.itemfee_final
					_t.itemfee_coupon = parseFloat(data.itemfee_coupon)
					_t.shop_name = data.shop_name
					_t.html = data.content
					_t.item = data
					_t.loaded = true
					
					let hot = []
					let num = 6
					
					data.guess.forEach((item, index) => {
					    let page = Math.floor(index / num); // 计算该元素为第几个素组内
					    if (!hot[page]) { // 判断是否存在
					      hot[page] = [];
					    }
					    hot[page].push(item);
					})
					_t.hotGood = hot
				}).catch(e => {
					console.log(e)
				})
			},
			
			//复制文字
			copyClick (item) {
				uni.setClipboardData({
					data: item,
					success: function () {
						uni.showToast({
							title:'文字已复制',
						})
					}
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.container{
		padding-bottom: 130px;
	}
	
	.header{
		position: fixed;
		width: 100%;
		height: 92px;
		top: 0;
		left: 0;
		z-index: 10;
		opacity: 0;
		background: #FF5757;
		// background:linear-gradient(180deg,rgba(255,87,87,1) 0%,rgba(255,40,61,1) 100%);
		
		&.bgnone{
			background: none;
			opacity: 1;
		}
		
		.btn-back{
			width: 92px;
			height: 92px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: none;
			
			.icon{
				width: 28px;
				height: 28px;
			}
			
			.icon2{
				width: 52px;
				height: 52px;
			}
		}
	}
	
	.banner{

		.swiper{
			width: 750px;
			height: 750px;
			overflow: hidden;
		}
		
		.swiper-item{

			.img{
				width: 100%;
				height: 750px;
			}
		}
	}
	
	.h1{
		position: relative;
		padding: 30px 30px 0;
		
		.icon{
			position: absolute;
			top: 30px;
			left: 30px;
			width: 100px;
			font-size: 22px;
			text-align: center;
			line-height: 40px;
			border-radius: 40px;
			background: #FF3660;
			color: #FFFFFF;
		}
		
		text{
			width: 100%;
			font-size: 32px;
			color: #333;
			text-indent: 120px;
			display: -webkit-box;
			overflow: hidden;
			white-space: normal;
			text-overflow: ellipsis;
			word-wrap: break-word;
			-webkit-box-orient: vertical;
		}
	}
	
	.row{
		padding: 30px 30px 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		&.pt20{
			padding-top: 20px;
		}
		
		&.bdt{
			border-top: 10rpx solid #eee;
		}
		
		&.mt30{
			margin-top: 30px;
		}
		
		.price{
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			margin-bottom: 8px;
			
			text{
				font-size: 40px;
				color: #FF3660;
			}
			
			.i{
				font-size: 28px;
				padding-top: 8px;
			}
			
			.u{
				font-size: 24px;
				padding-top: 8px;
				padding-left: 8px;
				text-decoration: line-through;
				color: #999999;
			}
		}
		
		.sell{
			font-size: 24px;
			color: #999999;
			white-space: nowrap;
		}
	}
	
	.quan{
		position: relative;
		
		.icon{
			width: 690px;
			height: 180px;
		}
		
		.cite{
			position: absolute;
			left: 110px;
			bottom: 0;
			height: 180px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			
			.num{
				display: flex;
				align-items: center;
				
				text{
					color: #FF3078;
				}
				
				.i{
					font-size: 30px;
					padding-top: 10px;
				}
				
				.b{
					font-size: 50px;
					margin-right: 20px;
				}
			}
			
			.time{
				font-size: 20px;
				color: #333333;
			}
		}
		
		.btn{
			position: absolute;
			right: 30px;
			bottom: 0;
			height: 180px;
			width: 40%;
			opacity: 0;
		}
	}
	
	.levelup{
		width: 100%;
		height: 80px;
		padding: 0 20px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #333333;
		border-radius: 8px;
		
		text{
			font-size: 26px;
			color: #F9C694;
		}
		
		.go{
			width: 152px;
			height: 60px;
			background: #E7BB90;
			border-radius: 30px;
			font-size: 26px;
			color: #333;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	
	.shop{
		
		.name{
			display: flex;
			align-items: center;
			
			.icon{
				width: 32px;
				height: 32px;
				margin-right: 10px;
			}
			
			text{
				font-size: 26px;
				color: #333333;
			}
		}
		
		.point{
			display: flex;
			align-items: center;
			margin-top: 16px;
			
			&.mt0{
				margin-top: 0;
			}
			
			.li{
				display: flex;
				align-items: center;
				margin-right: 20px;
				
				.i{
					font-size: 24px;
					color: #666;
					margin-right: 10px;
				}
				
				.b{
					font-size: 24px;
					color: #FF3660;
					margin-right: 6px;
				}
				
				.icon{
					width: 28px;
					height: 22px;
				}
			}
		}
	}
	
	.detail{
		
		.dt{
			display: flex;
			align-items: center;
			justify-content: center;
			padding-bottom: 30px;
			
			text{
				font-size: 34px;
				color: #333333;
			}
		}
		
		.con{
			width: 100%;
			overflow-x: hidden;
		}
	}
	
	.hot-goods{
		border-top: 1px solid #F1F1F1;
		
		.title{
			padding: 30px 30px 0;
			font-size: 32px;
			color: #333333;
		}
		
		.swiper{
			height: 960px;
		}
	}
	
	.hot-good-list{
		display: flex;
		flex-wrap: wrap;
		padding-left: 30px;
		padding-top: 30px;
		
		.item{
			width: 220px;
			background: #FFFFFF;
			border-radius: 12px;
			overflow: hidden;
			margin-right: 15px;
			margin-bottom: 15px;
			
			.pic{
				width: 220px;
				height: 220px;
			}
			
			.cite{
				padding: 10px;
				
				.name{
					width: 100%;
					font-size: 28px;
					color: #333;
					display: -webkit-box;
					overflow: hidden;
					white-space: normal;
					text-overflow: ellipsis;
					word-wrap: break-word;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				
				.price{
					margin-top: 20px;
					display: flex;
					
					.i{
						font-size: 24px;
						color: #FF3660;
						padding-top: 8px;
					}
					
					.b{
						font-size: 30px;
						color: #FF3660;
					}
					
					.u{
						font-size: 22px;
						color: #999;
						padding-top: 8px;
						text-decoration: line-through;
					}
				}
				
				.row{
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-start;
					margin-top: 20px;
					padding: 0;
					.quan{
						background: linear-gradient(to right, #fd4a29 , #ff6f18);;
						padding: 0 10px;
						height: 36px;
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						border-radius: 6px;
						
						text{
							font-size: 22px;
							color: #FFFFFF;
							width:80rpx;
							text-align:center
						}
					}
					
					.fan{
						background: #333333;
						padding: 0 10px;
						height: 36px;
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						margin-left: 10px;
						border-radius: 6px;
						
						text{
							font-size: 22px;
							color: #fee7c7;
							width:80rpx;
							text-align:center
						}
					}
				}
			}
			
			
		}
	}
	
	
	.footer{
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		height: 100px;
		background: #FFFFFF;
		z-index: 10;
		box-shadow: 0px -4px 16px 0px rgba(122,142,216,0.27);
		display: flex;
		align-items: center;
		justify-content: center;
		
		.btn{
			width: 35%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-radius: 0;
			line-height: 1.25;
			
			text{
				color: #FFFFFF;
				font-size: 24px;
			}
			
			.b{
				font-size: 32px;
			}
			
			&.bdl{
				border-left: 1px solid #eee;
			}
		}
		
		.btn_home{
			width: 15%;
			background: #FFFFFF;
			
			text{
				color: #333333
			}
		}
		
		.btn_buy{
			background:linear-gradient(270deg,rgba(255,92,120,1) 0%,rgba(231,38,31,1) 100%);
		}
		
		.btn_share{
			background: #333333;
		}
		
		
	}
</style>
